<template>
    <div id="v-no-border-select">
        <el-select v-model="selValue" :placeholder="placeholder" @change="change" :style="{ width: `${width}px` }">
            <el-option
                v-for="item in options"
                :key="item[itemKey]"
                :label="item[itemValue]"
                :value="item[itemKey]">
            </el-option>
        </el-select>
    </div>
</template>

<script type="text/ecmascript-6">
    export default {
        name: 'v-no-border-select',
        props: {
            value: {
                type: String
            },
            placeholder: {
                type: String,
                default: '请选择'
            },
            options: {
                type: Array
            },
            width: {
                type: Number,
                default: 105
            },
            itemKey: {
                type: String,
                default: 'value'
            },
            itemValue: {
                type: String,
                default: 'label'
            }
        },
        data () {
            return {
                selValue: ''
            }
        },
        methods: {
            change (val) {
                this.options.forEach((item) => {
                    if (item[this.itemKey] === val) {
                        this.$emit('on-change', item)
                    }
                })
            }
//      getItemKey (item) {
//        for (let key in item) {
//          if (key === this.itemKey) {
//            return item[this.itemKey]
//          }
//        }
//      },
//      getItemVal (item) {
//        for (let key in item) {
//          if (key === this.itemValue) {
//            return item[this.itemValue]
//          }
//        }
//      }
        },
        created () {
            this.selValue = this.value
        }
    }
</script>

<style lang="stylus" rel="stylesheet/stylus">
    #no-border-select
        .el-input__inner
            background #409EFF
            border 1px solid #409EFF
            color #fff
        .el-select .el-input .el-select__caret
            color #fff
        .el-input__inner:hover, el-select:hover
            border-color #409eff
        ::-moz-placeholder /* Mozilla Firefox 19+ */
            color #fff
        input:-ms-input-placeholder
            color #fff
        input:
        :-webkit-input-placeholder
            color #fff
</style>
